<template>
  <div class="add-hotel">
        <Breadcrumb :pathContent="content"/>
        <el-form>
            <el-form-item>
                <div class="add-hotel-content">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="基本信息" name="first"><HotelBasic /></el-tab-pane>
                        <el-tab-pane label="酒店设施" name="second"><HotelFacilities /></el-tab-pane>
                        <el-tab-pane label="酒店政策" name="third"><HotelPolicy /></el-tab-pane>
                        <el-tab-pane label="周边设施" name="fourth"><SurroundingFacilities /></el-tab-pane>
                        <el-tab-pane label="酒店图片" name="fifth"><HotelPicture /></el-tab-pane>
                    </el-tabs>
                </div>
            </el-form-item>
      </el-form>
  </div>
</template>
<script>
const Breadcrumb = () => import('@/components/common/Breadcrumb')
const HotelBasic = () => import('@/components/hotel/add_hotel/HotelBasic')
const HotelFacilities = () => import('@/components/hotel/add_hotel/HotelFacilities')
const HotelPolicy = () => import('@/components/hotel/add_hotel/HotelPolicy')
const SurroundingFacilities = () => import('@/components/hotel/add_hotel/SurroundingFacilities')
const HotelPicture = () => import('@/components/hotel/add_hotel/HotelPicture')

export default {
  name: 'AddHotel',
  data () {
    return {
      activeName: 'first',
      content: {
        firstTitle: '酒店管理',
        secondTitle: '酒店信息',
        type: 'close'
      }
    }
  },
  methods: {
    handleClick () {}
  },
  components: {
    Breadcrumb,
    HotelBasic,
    HotelFacilities,
    HotelPolicy,
    SurroundingFacilities,
    HotelPicture
  }
}
</script>
<style lang="scss">
    .el-form .information-btn{
    margin-left: -30px;
    padding: 8px 0px 8px 30px;
  }
  .el-tabs__header{
    margin: 0px;
  }
    .add-hotel-content {
        margin-top: 10px;
        background-color: white;
        padding: 20px 30px 20px 30px;
        position: relative;
        min-height: 80vh;
      /*头部切换导航样式*/
      .el-tabs__item{
        height: 60px;
      }
      .el-tabs__item.is-active{
        color: #6d2377;
      }
      .el-tabs__item:hover{
        color: #6d2377;
      }
      .demo-ruleForm{
        .el-form-item,.el-form-item__content,.el-form-item__label,.el-cascader{
          line-height: 34px;
          height: 34px;
        }
      }
    }
    .expand-trigger div {
        height: 50px!important;
    }
    .increase {
        position: absolute;
        top: 0;
        left: 0;
        width: 96.5%;
        background: white;
        z-index: 3;
        padding: 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
        h1 {
            text-align: left;
            margin-bottom: 10px;
        }
        .el-form-item {
            .el-form-item__content {
                text-align: left;
                .el-input {
                    width: 300px;
                }
            }
        }
    }
</style>
